import { useState, useRef, useEffect } from "react";
import { CommonModal } from "@/views/components/CommonModal";
import { CommonField } from "@/pages/OrderModule/common/components/CommonForm";
// import CommonInput from "@/pages/OrderModule/common/components/CommonInput";
// import CommonInputNumber from "@/pages/OrderModule/common/components/CommonInputNumber";
// import { PrefixPlaceholder } from "@/views/components/PrefixPlaceholder";
import IconFont from "@/components/IconFont";
import { PrefixPlaceholder, Input, PreInputNumber, CommonInput, CommonInputNumber } from "@/views/components/PrefixPlaceholder";
import {
	Button,
	Col,
	Collapse,
	Form,
	// Input,
	// Select,
	Row,
	Tooltip,
	Checkbox,
	Space,
	Modal,
	Anchor,
	Drawer,
	message,
	Tabs
} from "antd";
import HelpInfo from "@/views/components/HelpInfo";
import { useArchorList } from "./archorList";
import { useAnchor } from "@/pages/OrderModule/common/hooks/useAnchor";
import { DoubleLeftOutlined, ContainerTwoTone } from "@ant-design/icons";
import Style from "./index.module.less";
import { batchUpdateGoodsSkuInfo } from "../../../service";
import CommonDrawer from '@/components/CommonDrawer';

const ARCHOR_LIST_MAP = {
	basicInformation: 0, // 基础信息
	priceInformation: 1, // 价格信息
	otherInformation: 2 // 其他信息
};

const { Link } = Anchor;
const BatchModifyProducts = props => {
	console.log("props", props);
	const { selectedKeys, onCancel, fetchList, tabsType } = props;
	const [form] = Form.useForm();
	//其他价格数量
	const otherPrice = Array(5)
		.fill("")
		.map((_, index) => ({ label: `其他价格${index + 1}`, value: `price${index + 1}` }));
	//其他属性数量
	const otherAttr = Array(5)
		.fill("")
		.map((_, index) => ({ label: `其他属性${index + 1}`, value: `attribute${index + 1}` }));

	// 锚点
	const archorList = useArchorList();
	const [tab, setTab] = useState(archorList[tabsType].key);
	const contentWrapperRef = useRef(null);
	const anchorItems = useRef({});
	const { currentAnchor, scrollToAnchor } = useAnchor(contentWrapperRef, anchorItems);

	useEffect(() => {
		archorList.forEach(item => {
			anchorItems.current[item.key] = document.getElementById(item.key);
		});
	}, []);

	function handleOk() {
		form.validateFields().then(async value => {
			const API_DATA = form.getFieldsValue();
			console.log("API_DATA", API_DATA);
			batchUpdateGoodsSkuInfo({ ...API_DATA, ids: selectedKeys })
				.then(res => {
					const { msg, success } = res;
					if (success) {
						message.success(msg);
						onCancel();
						fetchList();
					}
				})
				.catch(err => {
					console.log("err", err);
				});
		});
	}
	return (
		<CommonDrawer
			title="批量修改商品"
			open={true}
			width="80%"
			onClose={onCancel}
			footer={
				<Row justify="space-between" style={{ alignItems: "center" }}>
					<Col>
						<Checkbox defaultChecked>当前勾选生效{selectedKeys.length ?? 0}条商品</Checkbox>
					</Col>
					<Col>
						<Space>
							<Button size="middle" onClick={props.onCancel}>
								取消
							</Button>
							<Button size="middle" type="primary" onClick={handleOk}>
								确定
							</Button>
						</Space>
					</Col>
				</Row>
			}
		>
			<div className="flex" style={{ flexDirection: "column", height: "100%" }}>
				<div className={Style.archor_tab + " rule-reset"}>
					<Tabs
						activeKey={tab}
						onChange={val => {
							console.log("val", val);
							setTab(val);
							scrollToAnchor(val);
						}}
					>
						{archorList.map(item => (
							<Tabs.TabPane tab={item.title} key={item.key}></Tabs.TabPane>
						))}
					</Tabs>
				</div>
				<div className={Style.detail_inner} ref={contentWrapperRef}>
					<Form form={form}>
						<Collapse
							defaultActiveKey={Object.keys(ARCHOR_LIST_MAP)}
							ghost
							expandIcon={({ isActive }) => (
								<DoubleLeftOutlined rotate={isActive ? 270 : 90} style={{ fontSize: "16px", color: "#4E5969" }} />
							)}
							expandIconPosition="end"
							className={Style["reset-collapse"]}
						>
							<Collapse.Panel header={archorList[ARCHOR_LIST_MAP.basicInformation].render()} key="basicInformation">
								<Row gutter={[12, 6]} className={Style.container}>
									<Form.Item
										name="skuName"
										style={{ width: "calc(40% - 10px)" }}
										rules={[
											{ max: 100, message: "最多支持输入100个字符" },
											{ required: true, message: "请输入商品名称" }
										]}
										className={Style.item}
									>
										<CommonInput placeholder="商品名称" aria-required maxLength={100} showCount={true} />
									</Form.Item>

									<Row gutter={6} className={Style.item}>
										<Col span={22}>
											<Form.Item
												name="spuCode"
												rules={[
													{ max: 64, message: "最多支持输入64个字符" },
													{ required: true, message: "请输入款式编码" }
												]}
											>
												<CommonInput placeholder="款式编码" aria-required maxLength={64} showCount={true} />
											</Form.Item>
										</Col>
										<Col span={2}>
											<Tooltip
												placement="bottomLeft"
												title={
													"修改款式编码后，如果新款式编码资料已存在，则原款式编码资料被删除，如新款式编码不存在，则按原款式编码资料转移至新款式编码，请知悉"
												}
											>
												<IconFont type="iconwenhao" />
											</Tooltip>
										</Col>
									</Row>
									<Form.Item name="spuAbbreviation" rules={[{ max: 40, message: "最多支持输入40个字符" }]} className={Style.item}>
										<CommonField
											Component={Input}
											props={{
												placeholder: "商品简称",
												maxLength: 40,
												showCount: true
											}}
										/>
									</Form.Item>
									<Form.Item name="weight" className={Style.item}>
										<PreInputNumber
											placeholder="重量"
											min={0}
											precision={2}
											controls={false}
											addonAfter="kg"
											style={{ width: "100%" }}
										/>
									</Form.Item>
								</Row>
							</Collapse.Panel>
							<Collapse.Panel header={archorList[ARCHOR_LIST_MAP.priceInformation].render()} key="priceInformation">
								<Row gutter={[12, 6]} className={Style.container}>
									<Form.Item name="costPrice" className={Style.item}>
										<PreInputNumber placeholder="成本价" min={0} precision={2} controls={false} style={{ width: "100%" }} />
									</Form.Item>
									<Form.Item name="purchasePrice" className={Style.item}>
										<PreInputNumber placeholder="采购价" min={0} precision={2} disabled style={{ width: "100%" }} />
									</Form.Item>
									<Form.Item name="retailPrice" className={Style.item}>
										<CommonInputNumber placeholder="零售价" min={0} precision={2} controls={false} />
									</Form.Item>
									<Form.Item name="tagPrice" className={Style.item}>
										<PreInputNumber placeholder="市场I吊牌价" min={0} precision={2} controls={false} style={{ width: "100%" }} />
									</Form.Item>
								</Row>
							</Collapse.Panel>
							<Collapse.Panel header={archorList[ARCHOR_LIST_MAP.otherInformation].render()} key="otherInformation">
								<Row gutter={[12, 6]} className={Style.container}>
									{otherPrice.map((e, index) => (
										<Form.Item key={e.value} name={e.value} className={Style.item}>
											<PreInputNumber
												placeholder={`${e.label}`}
												min={0}
												precision={2}
												controls={false}
												style={{ width: "100%" }}
											/>
										</Form.Item>
									))}
								</Row>
								<Row gutter={[12, 6]} className={Style.container}>
									{otherAttr.map((e, index) => (
										<Form.Item
											key={e.value}
											name={e.value}
											rules={[{ max: 50, message: "最多支持输入50个字符" }]}
											className={Style.item}
										>
											<CommonField
												Component={Input}
												props={{
													placeholder: `${e.label}`,
													showCount: true,
													maxLength: 50
												}}
											/>
										</Form.Item>
									))}
								</Row>
								<Row gutter={[12, 6]} className={Style.container}>
									<Form.Item name="virtualInventory" className={Style.item}>
										<CommonField
											Component={Input}
											props={{
												placeholder: "虚拟库存"
											}}
										/>
									</Form.Item>
								</Row>
							</Collapse.Panel>
						</Collapse>
					</Form>
				</div>
			</div>
		</CommonDrawer>
	);
};
export default BatchModifyProducts;
